<template>
  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
    <PcHeader/>
    <!--  详情  -->
    <div v-if="!detailInfo" style="height: 900px;"></div>
    <div v-if="detailInfo" class="data_type_div">
      <el-row>
        <el-col :span="18">
          <div class="grid-content bg-purple-light">
            <el-carousel :interval="4000" type="card" height="312px">
              <el-carousel-item v-for="item in roomImgList" :key="item.id">
                <img :src="'/dev-api'+item.img">
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="margin-left: 20px;margin-top: 24px;">
            <span v-if="detailInfo.typeId == 1"><el-link type="primary">大房({{ detailInfo.name }})</el-link></span>
            <span v-if="detailInfo.typeId == 2"><el-link type="success">小房({{ detailInfo.name }})</el-link></span>
            <el-divider content-position="right">
              <el-link type="danger">{{ detailInfo.floor }}层</el-link>
            </el-divider>
            <el-link type="danger">特价: ￥{{ detailInfo.price }}</el-link>
          </div>
          <div style="margin-left: 20px;margin-top: 20px;float: right">
            <el-button type="danger" @click.stop="yuDing()">预定</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="data_div" style="display:flex">
      <div class="data_div_left">
        <el-tabs tab-position="top" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="介绍" name="first">
            <div v-html="detailInfo.content" class="dialog-h5">
            </div>
          </el-tab-pane>
          <el-tab-pane label="评价" name="second">
            <div class="block">
              <el-timeline>
                <el-timeline-item
                  timestamp="我要评价"
                  placement="top"
                  type="success"
                  v-if="this.$store.state.user.name">
                  <el-card>
                    <el-form ref="form" :model="form" label-width="80px">
                      <el-form-item label="内容" prop="conent">
                        <el-input v-model="form.conent" type="textarea" placeholder="请输入内容"/>
                      </el-form-item>
                      <div style="float: right;margin-bottom: 10px">
                        <el-button type="primary" @click="submitForm">评价</el-button>
                      </div>
                    </el-form>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item
                  v-for="item in listEvaluation"
                  :timestamp="parseTime(item.addTime, '{y}-{m}-{d}')"
                  placement="top"
                  type="success">
                  <el-card>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="handleDelete(item.id)"
                               v-show="item.userId == currentUserId">删除
                    </el-button>
                    <h4>{{ item.conent }}</h4>
                    <p style="font-size: 14px;font-weight: 100;float: right">{{ item.userName }} 评价于
                      {{ parseTime(item.addTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</p>
                  </el-card>
                </el-timeline-item>
                <!--                <el-timeline-item placement="top" type="info" v-if="total>0">
                                  <el-button type="text" class="button" @click.stop="more()">更多...</el-button>
                                </el-timeline-item>
                                <el-timeline-item placement="top" type="info" v-else>
                                  <el-button type="text" class="button">我是有底线的</el-button>
                                </el-timeline-item>-->
              </el-timeline>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <PcFooter/>
    <PcUp/>

    <bookRoom :room-id="detailInfoId" :orderShow.sync="orderShow"></bookRoom>

  </div>
</template>

<script>
import {mapState} from 'vuex'
import variables from '@/assets/styles/variables.scss'
import headTop from '../../components/myComponents/components/top/index'
import PcHeader from '../../components/myComponents/components/header/index'
import PcCarousel from '../../components/myComponents/components/carousel/index'
import PcCard from '../../components/myComponents/components/pc_card/index'
import PcFooter from '../../components/myComponents/components/pc_footer/index'
import PcUp from '../../components/myComponents/components/pc_up/index'
import bookRoom from "@/components/bookRoom";
import suspensionSearch from '../../components/myComponents/components/suspension_search/index'
import {getRoom, listRoomImg, listEvaluation} from "@/api/pc";

export default {
  name: 'PcDetails',
  components: {
    headTop,
    PcHeader,
    PcCarousel,
    PcCard,
    PcFooter,
    PcUp,
    suspensionSearch,
    bookRoom
  },
  created() {
    this.currentUserId = 1
    this.detailInfoId = this.$route.query.id
    this.getRoomInfo(this.detailInfoId)
    this.queryParams.roomId = this.detailInfoId
    this.queryParamsE.roomId = this.detailInfoId
    this.getListRoomImg()
    this.getListEvaluation();
  },
  data() {
    return {
      msg: 'vue模板页',
      detailInfo: {},
      currentUserId: null,
      detailInfoId: null,
      activeName: 'first',
      roomImgList: null,
      queryParams: {
        roomId: null,
      },
      queryParamsE: {
        roomId: null,
      },
      form: {},
      listEvaluation: null,
      total: 0,
      orderShow: false,
    }
  },
  methods: {
    getListEvaluation() {
      let shopData = [];
      for (let i = this.queryParams.pageNum; i < this.queryParams.pageNum + 8; i++) {
        shopData.push({
          id: 'hanP' + i,
          userId: 1,
          userName: '张三',
          name: 'JAVA_' + i,
          addTime: '2021-02-02 12:25:24',
          conent: 'abstractStrabstractStrabstractStr'
        })
      }
      this.listEvaluation = shopData;
      this.total = 18
    },
    more() {
      this.queryParamsE.pageNum = this.queryParamsE.pageNum + 1
      this.getListEvaluation();
    },
    getListRoomImg() {
      let shopData = [];
      for (let i = this.queryParams.pageNum; i < this.queryParams.pageNum + 8; i++) {
        shopData.push({
          id: 'hanP' + i,
          img: ''
        })
      }
      this.roomImgList = shopData;
    },
    getRoomInfo(id) {
      this.detailInfo = {
        id: 'hanP',
        name: 'JAVA_',
        img: 'http://www.java1234.vip/courseImages/20210928113210.jpg',
        currentDate: '2022-08-20',
        price: '199',
        typeId: 1,
        floor: 8,
      }
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    yuDing() {
      this.orderShow = true;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (!this.form.conent) {
            this.$modal.msgError("请填写内容")
            return
          }
          this.form.roomId = this.detailInfo.id
          this.form.roomName = this.detailInfo.name
          /*addEvaluation(this.form).then(response => {
            this.$modal.msgSuccess("评论成功");
            window.location.reload()
          });*/
        }
      });
    },
    handleDelete(id) {
      this.$modal.confirm('是否确认删除评论').then(function () {
        return /*delEvaluation(id);*/ 1;
      }).then(() => {
        window.location.reload()
      }).catch(() => {
      });
    },
  },
  computed: {
    ...mapState({
      theme: state => state.settings.theme,
      sideTheme: state => state.settings.sideTheme,
      sidebar: state => state.app.sidebar,
      device: state => state.app.device,
      needTagsView: state => state.settings.tagsView,
      fixedHeader: state => state.settings.fixedHeader
    }),
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    },
    variables() {
      return variables
    }
  }
}

</script>
<style scoped>
.data_type_div {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 20px 355px;
  width: 1210px;
  padding: 10px;
}

.data_div {
  margin: 20px 355px;
  width: 1210px;
  display: flex;
}

.data_div_left {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 1210px;
  padding: 16px;
  float: left;
}

.data_div_right {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 282px;
  height: 372px;
  float: right;
  margin-left: 40px;
}

.time {
  font-size: 13px;
  color: #999;
}

.image {
  width: 100%;
  display: block;
}

.fontSpan {
  font-size: 14px;
  color: #999;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
  height: 372px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.dialog-h5 >>> img,p,span {
  width: 100%;
}
</style>
